<template>
  <page-frame>
    <div class="serviceItem">
      <div class="toptitle">
        <div class="left">服务项目</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="addServiceItem">新增项目</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="tabChange">
        <el-button @click="toggle(index,tab.id)" v-for="(tab,index) in tabs" :class="{lightGreenBtn:active===index}">{{tab.name}}</el-button>
      </div>
      <el-table
        :data="tableData"
        border
        @row-dblclick="dbClick"
        style="width: 100%">
        <el-table-column
          prop="serviceNo"
          label="服务编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="serviceName"
          label="服务项目"
          width="">
        </el-table-column>
        <el-table-column
          prop="typeName"
          label="服务类型"
          width="">
        </el-table-column>
        <el-table-column
          prop="scopeName"
          label="服务范围"
          width="">
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          width="">
          <template scope="scope">
            <div v-html="scope.row.description"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="statusName"
          label="状态"
          width="80">
        </el-table-column>
        <el-table-column
          label="操作"
          width="130">
          <template scope="scope">
            <el-button v-if="scope.row.statues===0" type="text" size="small" @click.stop="start(scope.row)">启用</el-button>
            <el-button v-if="scope.row.statues===1" type="text" size="small" @click.stop="stop(scope.row)">停用</el-button>
            <el-button v-if="scope.row.statues===1" type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
            <!--<el-button type="text" size="small" @click.stop="del(scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChangePage"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script >
  import serviceItemApi from '../../service/serManagement/serviceItemApi';
  export default {
    data () {
      return {
        active:0,
        queryData:{
          typeId:0,
        },
        tabs:[{
          id:0,
          name:"全部",
        },{
          id:1,
          name:"生活类",
        },{
          id:2,
          name:"医疗类",
        },{
          id:3,
          name:"护理类",
        },{
          id:4,
          name:"康复类",
        },{
          id:5,
          name:"保健类",
        },{
          id:6,
          name:"增值类",
        },{
          id:7,
          name:"其他",
        }],
        tableData: [],
        total:0,
        currentPage:1,
      }
    },
    methods: {
      init() {
        this.loadTableData(0,1);
      },
      /**
       * tab切换
       */
      toggle(index,id){
        this.active = index;
        this.loadTableData(id,1);
      },
      /**
       * 添加服务项目(按钮)(way:1表示添加)
       */
      addServiceItem(){
        this.$router.push({name:'addServiceItems',params:{way:1,serviceId:-1}});
      },
      /**
       * 编辑(操作)(way:2表示编辑)
       */
      edit(row){
        this.$router.push({name:'addServiceItems',params:{way:2,serviceId:row.serviceId}});
      },
      /**
       * 双击单元格查看详情(way:0表示查看详情)
       */
      dbClick(row){
        this.$router.push({name:'addServiceItems',params:{way:0,serviceId:row.serviceId}});
      },
      /**
       * 加载表格数据
       */
      loadTableData(Id,pageNum){
        let self = this;
        self.queryData.typeId = Id;
        serviceItemApi.getServiceList(10,pageNum,self.queryData).then(
          (response)=>{
            if(response.data.data.list){//返回的数据不为空
              self.tableData = response.data.data.list;
              self.total = response.data.data.total;
              for(let i=0;i<self.tableData.length;i++){
                //启用 停用类型转换
                if(self.tableData[i].statues==1){
                  self.tableData[i].statusName="启用";
                }else if(self.tableData[i].statues==0){
                  self.tableData[i].statusName="停用";
                }
                //服务类型转换
                switch(self.tableData[i].typeId){
                  case 0:
                    self.tableData[i].typeName = '全部';
                    break;
                  case 1:
                    self.tableData[i].typeName = '生活类';
                    break;
                  case 2:
                    self.tableData[i].typeName = '医疗类';
                    break;
                  case 3:
                    self.tableData[i].typeName = '护理类';
                    break;
                  case 4:
                    self.tableData[i].typeName = '康复类';
                    break;
                  case 5:
                    self.tableData[i].typeName = '保健类';
                    break;
                  case 6:
                    self.tableData[i].typeName = '增值类';
                    break;
                  case 7:
                    self.tableData[i].typeName = '其他';
                    break;
                }
                //服务范围类型转换
                switch(self.tableData[i].scope){
                  case 0:
                    self.tableData[i].scopeName = '全部';
                    break;
                  case 1:
                    self.tableData[i].scopeName = '机构内';
                    break;
                  case 2:
                    self.tableData[i].scopeName = '机构外';
                    break;
                }
              }
            }else{//返回的数据为空
              self.tableData = [];
            }
          }
        );
      },
      /**
       * 启用(操作)
       */
      start(row){
        this.startOrStopItem(row);
      },
      /**
       * 停用(操作)
       */
      stop(row){
        this.startOrStopItem(row);
      },
      /**
       * 删除(操作)
       */
      del(row){
        let self = this;
        self.$confirm('确定删除该服务项目', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          serviceItemApi.delServiceItem(row.serviceId).then(
            (response)=>{
              self.$message({
                message: '删除成功！',
                type: 'success'
              });
              self.loadTableData(0,1);
            }
          );
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
      });
      },
      /**
       * 服务项目的启用和停用
       */
      startOrStopItem(row){
        let statue;
        if(row.statues==0){
          statue=1;
        }else if(row.statues==1){
          statue=0;
        }
        serviceItemApi.startOrStopServiceItem(row.serviceId,statue).then(
          (response)=>{
              this.loadTableData(this.active,this.currentPage);
          }
        );
      },
      /**
       * 分页函数
       */
      handleSizeChange(val) {
//        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
//        console.log(`当前页: ${val}`);
        this.loadTableData(this.queryData.typeId,this.currentPage);
      },
    },
    mounted: function () {
      this.init();
    },
    components:{

    },
  }
</script>
<style>

</style>
